<template>
  <div class="login-container">
    <div class="header-container">
      <div class="logo-box">
        <img :src="require('@/assets/images/login/logo.png')" />
      </div>
    </div>
    <div class="input-container">
      <div class="input-box">
        <div class="input-title">欢迎登录</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="login-form"
        >
          <el-form-item label="" prop="loginname">
            <el-input
              placeholder="请输入用户名"
              v-model="ruleForm.loginname"
              @keyup.native.enter="enter('loginname')"
            >
              <i slot="prefix" class="el-input__icon"
                ><img :src="require('@/assets/images/login/user.png')"
              /></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="ruleForm.password"
              ref="password"
              @keyup.native.enter="enter('password')"
            >
              <i slot="prefix" class="el-input__icon"
                ><img :src="require('@/assets/images/login/pwd.png')"
              /></i>
            </el-input>
          </el-form-item>
        </el-form>

        <el-button
          type="primary"
          round
          class="submitBtn"
          :loading="loading"
          @click="submitForm('ruleForm')"
          >登录
        </el-button>
        <!--  <p class="forgetPwd">忘记密码?</p> -->
      </div>
    </div>
    <div class="footer-container">
      <p>Copyright (c) 2020 All Rights Troila.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      rules: {
        loginname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      ruleForm: {
        loginname: '',
        password: '',
      },
      loading: false,
    }
  },
  computed: {
    token() {
      return this.$store.getters.token
    },
  },
  created() {
    let loginErr = window.sessionStorage.getItem('loginErr')
    if (loginErr && this.token) {
      this.$store
        .dispatch('user/logout')
        .then(() => {})
        .catch(() => {})
      this.$alertFn.error('登录已过期，请重新登录')
    }
  },
  methods: {
    enter(key) {
      switch (key) {
        case 'loginname':
          this.$refs.password.focus()
          break
        case 'password':
          this.submitForm('ruleForm')
          break
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.ruleForm)
            .then(async () => {
              this.loading = false
              this.$router.push('/reception')
              switch (res.code) {
                case 1:
                  this.$store.commit('SET_TOKEN', res.data)
                  this.$router.push('/reception')
                  break
                default:
                  this.loading = false
                  this.warn.text = res.message ? res.message : res.msg
                  this.warn.show = true
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1600px;
  min-height: 700px;
}
.header-container {
  position: absolute;
  width: 100%;
  height: 5%;
  margin: 70px 0 0 75px;
}
.header-container > .logo-box {
  width: 266px;
  height: 41px;
}
.header-container > .logo-box > img {
  width: 100%;
  height: 100%;
}
.input-container {
  position: absolute;
  top: 22%;
  width: 47%;
  height: 476px;
  margin: 0 25%;
  /*  margin: 156px 24.9% 0 25.75%; */
  background-image: url('../assets/images/login/background.png');
  background-size: 100% 100%;
}
.input-container > .input-box {
  padding-top: 77px;
  width: 39%;
  margin-left: 57%;
}
.input-container > .input-box > .input-title {
  color: rgba(33, 34, 75, 1);
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  padding-bottom: 55px;
}
.input-container > .input-box > .login-form .el-input__icon img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.input-container > .input-box > .submitBtn {
  width: 100%;
  background-color: #2a68c9;
  border-color: #2a68c9;
}
.input-container > .input-box > .submitBtn:hover {
  background-color: #1e5dc3;
  border-color: #1e5dc3;
}
.input-container
  >>> .el-form-item:not(.is-error)
  .el-input.is-active
  .el-input__inner,
.input-container >>> .el-form-item:not(.is-error) .el-input__inner:focus {
  border-color: #2a68c9;
}
/* .input-container > .input-box > .forgetPwd {
    color: #2a68c9;
    font-size: 12px;
    text-align: right;
    cursor: pointer;
    margin-top: 22px;
} */
.footer-container {
  position: absolute;
  /*  height: 5%; */
  bottom: 5%;
  left: 0;
  right: 0;
}
.footer-container > p {
  text-align: center;
  color: #999999;
}
</style>
<style>
.input-container .input-box .login-form .el-input--prefix .el-input__inner {
  padding-left: 42px;
  border-radius: 20px;
}
.input-container .input-box .login-form .el-input--prefix .el-input__prefix {
  padding-left: 8px;
  padding-right: 9px;
}
.input-container .input-box .login-form .el-input__icon {
  display: inline-block;
  width: 18px;
  height: 21px;
  vertical-align: top;
  margin-top: 10px;
}
.input-container .input-box .login-form .el-form-item {
  margin-bottom: 30px;
}
.el-form-item__error {
  left: unset;
  right: 0;
}
.input-container .input-box .el-button.is-round {
  padding: 9px 23px 8px;
}
.input-container .input-box .el-button {
  font-weight: 300;
  font-size: 20px;
  font-family: Source Han Sans CN;
  color: rgba(252, 253, 255, 1);
}
</style>